<template>
  <div>
    <BasicTable @register="registerTable" >
      <template #tableTitle>
        <a-button type="primary" @click="handleForm(false, {})" v-auth="'sys:area:save'" >
          <Icon icon="ant-design:plus-outlined" /> {{ t('新增') }}
        </a-button>
      </template>

      <template #toolbar>
        <a-button @click="expandAll" :title="t('展开一级')">
          <Icon icon="bi:chevron-double-down" /> {{ t('展开') }}
        </a-button>
        <a-button @click="collapseAll" :title="t('折叠全部')">
          <Icon icon="bi:chevron-double-up" /> {{ t('折叠') }}
        </a-button>
      </template>

      <template #firstColumn="{ record }">
        <span class="cursor-pointer" @click="expandCollapse(record)">
          {{ record.areaName }}
        </span>
    
      </template>
    </BasicTable>
    <InputForm @register="registerInputFormDrawer" @success="handleSuccess" />
  </div>
</template>
<script lang="ts" name="system-area" setup>
import {BasicColumn, BasicTable, useTable} from '/@/components/Table';
import {useDrawer} from '/@/components/Drawer';
import {useI18n} from '/@/hooks/web/useI18n';
import {useGlobSetting} from '/@/hooks/setting';
import {columns, searchFormSchema} from './data';
import {deleteArea, pageArea, updateAreaStatus} from './api';
import {useMessage} from '/@/hooks/web/useMessage';
import InputForm from './Form.vue';
import {Icon} from '/@/components/Icon';

const { t } = useI18n('');
const { createMessage } = useMessage();
const glob = useGlobSetting();
const [registerInputFormDrawer, { openDrawer: openInputFromDrawer }] = useDrawer();

const actionColumn: BasicColumn = {
  width: 150,
  title: '操作',
  dataIndex: 'action',
  fixed: 'right',
  slot: 'tableActions',
  actions:  (record: Recordable) => [
    {
      label: '删除',
      color: 'error',
      ifShow: record.sendStatus != 1,
      // auth: 'sys:area:delete',
      popConfirm: {
        title: '是否确认删除',
        confirm: handleDelete.bind(null, record),
      },
    },
    {
      label: '禁用',
      ifShow: record.status === '1',
      color: 'error',
      // auth: 'sys:area:updateStatus',
      popConfirm: {
        title: '确定禁用吗?',
        confirm: handleUpdateStatus.bind(null, record.id, "0"),
      },
    }, 
    {
      label: '启用',
      ifShow: record.status === '0',
      // auth: 'sys:area:updateStatus',
      popConfirm: {
        title: '确定启用吗?',
        confirm: handleUpdateStatus.bind(null, record.id, "1"),
      },
    }
  ],
  dropDownActions: (record: Recordable) => [
    {
      label: '添加下级',
      // auth: 'sys:area:save',
      onClick: handleForm.bind(null, false, { 
        parentId: record.id, 
        sortNo: record.sortNo
      }),
    }, 
    {
      label: '编辑',
      // auth: 'sys:area:update',
      onClick: handleForm.bind(null, true, record),
    }
  ]
}

const [registerTable, { reload, expandAll, collapseAll, expandCollapse }] = useTable({
  title: '区域',
  api: pageArea,
  columns: columns,
  bordered: false,
  beforeFetch: (params) => {
    params.parentId = !params.areaId && !params.parentId ? 0 : params.parentId
    return params;
  },
  formConfig: {
    baseColProps: { lg: 6, md: 12 },
    labelWidth: 90,
    schemas: searchFormSchema,
    showResetButton: false,
  },
  showTableSetting: true,
  useSearchForm: true,
  isTreeTable: true,
  pagination: true,
  canResize: true,
  rowKey: 'id',
  actionColumn,
})

async function handleDelete(record) {
  await deleteArea({ areaId: record.id }, reload);
}

const handleForm = (isUpdate, record) => {
  openInputFromDrawer(true, { record, isUpdate });
}

const handleUpdateStatus = async (areaId, status) => {
  await updateAreaStatus({areaId, status})
  handleSuccess()
}

const handleSuccess = () => {
  reload()
}
</script>
